﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    


		<head>
		<script type="text/javascript" src="<c:url value='/easyui/datagrid-detailview.js'/>"></script>
		<script type="text/javascript">
		    
			$(function(){
				  init();
			  
			});

			function init(){
				$('#t-dg').datagrid({
				loadMsg:'',
				view:detailview,
				detailFormatter:function(index,row){ 
					var height = row.iheight;
			    	if (height == "0") 
			    		height = "100%";
			    	else
			    		height += "px";
			    	
			        return '<div style="padding:5px"><img src="<c:url value="/Image/showFile"/>?id='+row.fileid+'" width="100%" height="'+height+'" /></div>';    
			    }
				
			});
				
			}
			
			
			
			
			
			var actionUrl;
			function newItem(){
				$('#dlg').dialog('setTitle', '新增横幅').dialog('open');
				$('#myform').form('clear');
				actionUrl = '<c:url value="/portal/Banner/saveBanner"/>';
			}
			
			function editItem(){
				var t = $('#t-dg');
				var row = t.datagrid('getSelected');
				if (row){
					actionUrl = '<c:url value="/portal/Banner/updateBanner"/>?id=' + row.id;
					$('#myform').form('load', row);
					$('#dlg').dialog('setTitle', '修改横幅').dialog('open');					
				}
			}
			
			
			
			
			function deleteItem(){
				var t = $('#t-dg');
				var row = t.datagrid('getSelected');
				if (row){
					$.messager.confirm('删除确认', '是否确定要删除选择横幅?', function(r){
						if (r){
					$.ajax({
						url:'<c:url value="/portal/Banner/destroyBanner"/>?id=' + row.id,
						type:'post',
						success:function(){		
							$('#t-dg').datagrid('reload');
						}
					});
						}
						});
				}
			}
			
			function saveItem(){
				

				$('#myform').form('submit', {
					url:actionUrl,
					onSubmit:function(){
						return $('#myform').form('validate');
					},
					success:function(data){
						var data = eval('('+data+')');
						if (data.success){
							$('#dlg').dialog('close');
							$('#t-dg').datagrid('reload');
						} else {
							$.messager.show({
								title:'保存失败',
								msg:'<pre>'+data.msg+'</pre>'
							});
						}
					}
				});
			}
			
			function doQuery(value){
				$('#t-dg').datagrid('load', {
					q: value
				});
			}
			
			function move(dir){
				var row = $('#t-dg').datagrid('getSelected');
				$.getJSON('<c:url value="/portal/banner/move"/>', {id:row.id,dir:dir}, function(){
					$('#t-dg').datagrid('reload');				
				});
			}
			
			function formatstatus(value,row){
				if (value == 1){
				      return "启用";
				   }else{
					   return "待用";
				   }
			}
			
			function formatbtype(value,row){
				   if (value == 0){
				      return "图片";
				   } if (value == 1) {
				      return "FLASH";
				   } if (value == 2) {
				      return "多图轮播";
				   } else {
				      return "其他";
				   }
				}
		</script>
	</head>
	<body>
		<div class="easyui-layout" fit="true">
			<div region="north" border="false" style="height:40px;padding:5px;overflow:hidden;">
		<div style="float:left">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">新增横幅</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">修改横幅</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteItem()">删除横幅</a>
			<a href="#" class="easyui-linkbutton" plain="true" onclick="move('up')">上移</a>
			<a href="#" class="easyui-linkbutton" plain="true" onclick="move('down')">下移</a>				
		</div>
	</div>
			
			
			<div region="center" border="false">
	      <table id="t-dg" style="display:none;"
						url="<c:url value='/portal/Banner/getBannerItems'/>"
						singleSelect="true" rownumbers="true" pagination="true"
						border="false" fit="true" fitColumns="true">
					<thead>
						<tr>
							<th field="title" width="100" sortable="true">名称</th>
<th field="btype" width="100" sortable="true" formatter="formatbtype">类型</th>
<th field="iheight" width="100" sortable="false">高度</th>
<th field="status" width="100" sortable="false" formatter="formatstatus">状态</th>
<th field="link" width="100" sortable="false" >链接</th>
						</tr>
					</thead>
				</table>			
			</div>
		</div>
		
		
		
			<div id="dlg" style="width:400px;height:250px;"
				class="easyui-dialog" closed="true" modal="true" buttons="#dlg-buttons">
			<div style="padding:10px">
				<div style="float:left">
					<form id="myform" method="post" style="margin:0;padding:0" enctype="multipart/form-data">
						<table>
							<tr>
<td style="width:80px">名称</td>
<td>
<input type="hidden"  id="id" name="id"/>
<input type="text" class="easyui-validatebox e-input" id="title" name="title" style="width:250px;" data-options="required:true,editable:true" ></input></td>
</tr>	
<tr>
<td style="width:80px">类型</td>
<td>
<select id="btype" name="btype" 
	data-options="required:true,editable:false" panelHeight="auto" class="easyui-combobox" style="width:255px;">
		<option value="0">图片</option>	
		<option value="1">FLASH</option>
		<!--  <option value="2">多图轮播</option>	-->		
</select></td>
</tr>	
<tr>
<td style="width:80px">链接</td>
<td>
<input type="text" class="easyui-validatebox e-input" id="link" name="link" style="width:250px;" data-options="required:false,editable:true" ></input>
<br/>类型为图片时有效</td>
</tr>	


<tr>
<td style="width:80px">高度</td>
<td><input type="text" class="easyui-validatebox e-input" id="iheight" name="iheight" style="width:250px;" data-options="required:true,editable:true" ></input>
</br>
0为自动高度
</td>
</tr>	
<tr>
<td style="width:80px">上传文件</td>
<td>
<input type="file" id="picfile" name="picfile" style="width: 250px;" />
</td>
</tr>	
<tr>
<td style="width:80px">状态</td>
<td>
<select id="status" name="status" 
	data-options="required:true,editable:false" panelHeight="auto" class="easyui-combobox" style="width:255px;">
		<option value="0">待用</option>	
		<option value="1">启用</option>		
</select></td>
</tr>	


				
						</table>
					</form>
				</div>			
				<div style="clear:both"></div>
			</div>
			<div id="dlg-buttons" style="text-align:center;">
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveItem()">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
			</div>
		</div>
		
		
		
		
	</body>
